<template>
  <div class="book-search w" style="margin-bottom:80ox;">
    <build-el-bread></build-el-bread>
    <div class="title" v-if="tableData.length != 0">您查询的获奖情况属实</div>
    <div class="title-no" v-else>
      未查询到您输入的姓名和证书编号请检查输入是否正确
    </div>
    <el-table
      :data="tableData"
      empty-text="暂无证书"
      style="width: 950px;margin:0 auto;"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="licensee"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="number"
        label="证书编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="证书名称"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
import JSONData from '@/assets/JSON'
import buildElBread from '@/components/build-el-bread'
export default {
  components: { buildElBread },
  data() {
    return {
      ...JSONData,
      details: {},
      tableData: [],
    }
  },
  async mounted() {
    console.log(this.$route.query, 'ww')
    let res = await this.api.findCertificate({
      ...this.$route.query,
    })
    if (res) {
      this.tableData = []
      this.tableData.push(res)
    }
    console.log(res, 'w')
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 0) {
        return 'info'
      }
      return ''
    },
  },
}
</script>
<style lang="less">
.book-search {
  margin-bottom: 80px !important;

  .el-table thead div {
    color: #333 !important;
  }
  .info {
    background-color: #fbfbfb;
  }
  .el-table__empty-text {
    color: #666 !important;
  }
  .title {
    color: #61a021;
    font-size: 16px;
    text-align: center;
    margin-bottom: 24px;
  }
  .title-no {
    color: #bf2c3b;
    font-size: 16px;
    text-align: center;
    margin-bottom: 24px;
  }
}
</style>
